<script >

  import SidebarNav from "@/components/SidebarNav.vue";
  import DocFilters from "@/components/DocFilters.vue";
  import Request from "@/api/request";

  export default {
    name: "Material",
    components: {DocFilters, SidebarNav},
    beforeCreate() {
      Request.get("/factory/modules").then(res => {
        console.log(res)
        this.modules = res.data
      })
    },
    data(){
      return{
        modules:[]
      }
    }
  }

</script>

<template>
  <el-container>
    <el-aside class="aside">

      <el-menu >
        <el-menu-item style="width: 200px" v-for="module in modules" :index="module.modDbTable" :key="module.id">
          <i class="iconfont" :class="module.icon"></i>
          <span>{{ module.modTitle }}</span>
          <span style="float:right; right: 0">{{ module.files }}份  <i  @click.native="this.$alert(11)" style="margin-right: 0 " type="success" class="el-icon-plus" size="mini"
                     circle></i></span>

        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main class="main">
      <el-row>
        <el-tabs type="border-card" v-model="activeName">
          <el-tab-pane label="论文" name="0">
            <DocFilters></DocFilters>
            <router-view v-if="activeName==='0'" :doc_status="activeName"></router-view>
          </el-tab-pane>
          <el-tab-pane label="草稿箱" name="1">
            <router-view v-if="activeName==='1'" :doc_status="activeName"></router-view>
          </el-tab-pane>
        </el-tabs>
        <div class="upload">
          <el-button  @click="upload()" type="primary" size="small"><i class="iconfont icon-srcm-i-nav-upload"></i>上传
          </el-button>
          <el-dropdown trigger="click">
            <el-button class="export" type="primary" size="small">
              导出<i class="el-icon-caret-bottom"></i>
            </el-button>
            <el-dropdown-menu>
              <el-dropdown-item>导出引文</el-dropdown-item>
              <el-dropdown-item>导出表格</el-dropdown-item>
              <el-dropdown-item @click.native="remove" class="batch-delete" :divided=true>批量删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-row>
    </el-main>
  </el-container>


</template>

<style scoped>
.batch-delete {
  color: #f56c6c;
}

/*.batch-delete:hover {
  background-color: #fbc4c4;
  color: white !important;
}*/

.aside {
  overflow: hidden;
  width: auto !important;
}

.main {
  padding: 0;
}

.export {
  margin-left: 10px;
}

.upload {
  position: absolute;
  right: 20px;
  top: 5px;
}

.export {
  margin-left: 10px;
}
</style>